<template>
    <h4>学习customRef</h4>
    {{ count }}
    <button @click="count++">+</button>
</template>

<script>
import { customRef } from 'vue';

export default {
    name: 'StudyCustomRef',
    setup() {
        //自定义Ref  实现防抖功能
        function myRef(value, dealy = 200) {
            let timmer
            return customRef((track, trigger) => {
                return {
                    get() {
                        track()
                        console.log('自定义Ref《===读取')
                        return value
                    },
                    set(newVal) {
                        clearTimeout(timmer)
                        timmer = setTimeout(() => {
                            value = newVal
                            trigger()
                            console.log('自定义Ref--->设置')
                        }, dealy)
                    }
                }
            })
        }

        //使用
        let count = myRef(0)

        return {
            count
        }
    }
}
</script>

<style>

</style>